<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="买文博">
    <title>静态页生成</title>
</head>
{%include './common.html'%}
<style>
    * {
        padding: 0;
        border: 0;
        margin: 0;
    }
    h1 {
        text-align: center;
        padding: 50px 0;
    }

    table {
        list-style: none;
        width: 800px;
        margin: 0 auto;
        border: 1px solid #e8e8e8;
        border-collapse: collapse;
    }

    table td {
        border: 1px solid #e8e8e8;
        padding: 10px;
        width: 50%;
    }
    a {
        font-size: 18px;
        color: #555;
    }

    a:hover {
        color: #000000;
        font-weight: bold;
    }

    input {
        width: 100%;
        height: 100%;
        font-size: 18px;
        outline: none;
    }

    .text {
        width: 780px;
        margin: 100px auto 0;
        font-size: 18px;
        padding:10px;
        line-height: 30px;
    }
    .text p{
        margin-bottom: 10px;
    }

    code{
        background-color: #e8e8e8;
        padding:2px 10px;
        border-radius: 4px;
        color:#ce1b02;
    }
    .btn{
        display: inline-block;
        text-decoration: none;
        padding:0 20px;
        border-radius: 4px;
        height: 40px;
        line-height: 40px;
        color:#fff;
    }
    .btn:hover{
        color:#fff;
        font-weight: normal;
    }
    .btn1{
        background-color: #7B72E9;
        border-color: #7B72E9;
    }
    .btn2{
        background-color: #FF4351;
        border-color: #FF4351;
        transition: .3s;
    }
    .btn2:hover{
        background-color: #ff7680;
        border-color: #ff7680;
    }
</style>

<body>
<h1>HTML文件列表</h1>
<table>
    <tr><td><a class="btn btn2" href="/dist">生成静态文件</a></td><td><input type="text" name="" value="备注功能待开发"></td></tr>
    <tr><td><a class="btn btn1" target="_blank" href="dictionary.html">五星云站常用片段速查</a></td><td><input type="text" name="" value=""></td></tr>
    <tr>
        <td><a class="btn btn1" href="http://192.168.8.7:10000/%ba%cb%d0%c4%d2%b5%ce%f1%b2%bf/" target="_blank">核心业务部项目图</a></td>
        <td></td>
    </tr>
    {%for v in links%}
    <tr>
        <td><a target="_blank" href="{{v}}">{{v}}</a></td>
        <td><input name="{{v}}" type="text" value=""></td>
    </tr>
    {%endfor%}
</table>
<div class="text">
    <h3>使用说明</h3>
    <p>基于nodeJS(v6.2.0)的开发工具，首次使用需要在 package.json文件所在目录下运行安装命令<code>npm install</code>安装所依赖的node文件包，在app.js 所在目录下运行 <code>node app.js</code>将会在本地启动一个web服务器,并在3000端口进行监听,webSocket服务在3001端口监听。方便前端开发，工具内置了nunjucks模板引擎，具体使用方法引擎文档详见<a target="_blank" href="http://mozilla.github.io/nunjucks/cn/api.html">nunjucks</a></p>
    <h3>文件组织方式</h3>
    <p>所有的js文件，css文件，图片文件分别存放于src目录下对应的文件下，这一点与五星云站保持对应。项目的html文件，片段存放于html文件夹下。system文件夹下文件不要随意修改，新建HTML文件命名应与system目录下html避免冲突，否则可能会造成异常。</p>
    <h3>文件的修改监听</h3>
    <p>利用webSocket 服务器会监测html文件的修改变动，当文件发生了变动，服务器会通过3001端口通知浏览器进行刷新操作。因此页面需要引入了<code>fresh.js</code>，同时确保当前浏览器支持webSocket，否则自动更新功能将失效</p>
    <h3>静态文件的生成</h3>
    <p>在一些场景中需要向客户提供完整的，可直接运行的html文件，因此加入了静态文件生成的功能。访问 <code>/dist</code> 路由，服务器收到请求后，将在项目根目录生成一个dist文件夹，将渲染完成的htm文件完整写入，同时将所引用的资源文件完整的引入。从而实现模板引擎的文件的静态化</p>
    <h3>后续功能将在项目中完善...</h3>
</div>


</body>
</html>